<template>
  <div class="food-calendar">
    <!-- 搜索行 -->
    <el-row>
      <el-form :inline="true" :model="queryParams" class="demo-form-inline">
        <el-form-item label="食物名称">
          <el-input v-model="queryParams.foodName" placeholder="请输入食物名称" clearable />
        </el-form-item>
        <el-form-item label="是否清真">
          <el-select v-model="queryParams.isHalal" placeholder="请选择" clearable>
            <el-option label="全部" value="" />
            <el-option label="是" :value="1" />
            <el-option label="否" :value="0" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">搜索</el-button>
        </el-form-item>
      </el-form>
    </el-row>

    <!-- 操作行 -->
    <el-row :gutter="10">
      <el-col :span="1.5">
        <el-button type="primary" plain @click="handleAdd">新增食谱</el-button>
      </el-col>
      <!-- 新增删除食谱按钮 -->
      <el-col :span="1.5">
        <el-button type="danger" plain @click="handleDeleteAll">删除食谱</el-button>
      </el-col>
    </el-row>

    <!-- 数据展示 -->
    <el-table border :data="foodList" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="50" align="center"/>
      <el-table-column prop="id" label="ID" width="80" align="center"/>
      <el-table-column prop="foodName" label="食物名称" width="200" align="center"/>
      <el-table-column prop="foodType" label="食物类型" width="200" align="center"/>
      <el-table-column prop="price" label="价格" width="180" align="center"/>
      <el-table-column label="是否清真" width="200" align="center">
        <template #default="scope">
          <el-tag :type="scope.row.isHalal ? 'success' : 'danger'">
            {{ scope.row.isHalal ? '是' : '否' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="foodImg" label="图片" width="250" align="center">
        <template #default="scope">
          <el-image v-if="scope.row.foodImg" :src="scope.row.foodImg" style="width: 50px; height: 50px;" />
          <span v-else>无图片</span>
        </template>
      </el-table-column>
      <el-table-column label="操作"  align="center">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="handleUpdate(scope.row)">修改</el-button>
          <el-button link type="danger" size="small" @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
        v-model:current-page="queryParams.current"
        v-model:page-size="queryParams.size"
        :page-sizes="[5, 10, 20]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="queryParams.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />

    <!-- 添加或修改对话框 -->
    <el-dialog v-model="dialogFormVisible" :title="dialogTitle" width="500">
      <el-form :model="form" ref="formRef" :rules="rules" label-width="100px">
        <el-form-item label="食物名称" prop="foodName">
          <el-input v-model="form.foodName" placeholder="请输入食物名称" />
        </el-form-item>
        <el-form-item label="食物类型" prop="foodType">
          <el-input v-model="form.foodType" placeholder="请输入食物类型" />
        </el-form-item>
        <el-form-item label="价格" prop="price">
          <el-input-number v-model="form.price" :min="0" placeholder="请输入价格" />
        </el-form-item>
        <el-form-item label="是否清真" prop="isHalal">
          <el-radio-group v-model="form.isHalal">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="图片链接" prop="foodImg">
          <el-input v-model="form.foodImg" placeholder="请输入图片链接" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="resetForm">取消</el-button>
        <el-button type="primary" @click="submitForm">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { getFoodList, addFood, updateFood, deleteFood } from '@/api/customer/food/index';

const queryParams = reactive({
  food_name: '', // 用户输入的食物名称
  is_halal: '', // 是否清真
  current: 1, // 当前页码
  size: 5, // 每页显示条数
  total:0
});
const foodList = ref([]);
// const total = ref(0); // 总条数
const dialogFormVisible = ref(false);
const dialogTitle = ref('');
const formRef = ref();
const form = reactive({
  id: null,
  food_name: '',
  food_type: '',
  price: 0,
  is_halal: 0,
  food_img: '',
});
const selectedRows = ref([]); // 存储选中的行数据

// 搜索方法
const onSubmit = () => {
  queryParams.pageNum = 1; // 重置页码
  getFoodData(); // 调用查询方法
};

// 查询食谱列表
const getFoodData = () => {
  console.log("getFoodData,queryParams:",queryParams);
  getFoodList(queryParams).then(({records,total}) => {
    foodList.value = records
    queryParams.total = total; // 更新总条数
  });
};

// 分页大小改变
const handleSizeChange = (val: number) => {
  queryParams.pageSize = val; // 更新每页显示条数
  getFoodData(); // 重新加载数据
};

// 当前页改变
const handleCurrentChange = (val: number) => {
  // queryParams.pageNum = val; // 更新当前页码
  getFoodData(); // 重新加载数据
};

// 新增按钮
const handleAdd = () => {
  dialogTitle.value = '新增食谱';
  resetForm();
  dialogFormVisible.value = true;
};

// 修改按钮
const handleUpdate = (row: any) => {
  dialogTitle.value = '修改食谱';
  Object.assign(form, row);
  dialogFormVisible.value = true;
};

// 删除单个食谱
const handleDelete = (id: number) => {
  ElMessageBox.confirm('确定删除该食谱吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    deleteFood(id).then(() => {
      ElMessage.success('删除成功');
      getFoodData();
    });
  });
};

// 删除所有选中的食谱
const handleDeleteAll = () => {
  if (selectedRows.value.length === 0) {
    ElMessage.warning('请至少选择一个食谱');
    return;
  }
  ElMessageBox.confirm('确定删除选中的食谱吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    const ids = selectedRows.value.map(row => row.id);
    deleteFood(ids).then(() => {
      ElMessage.success('批量删除成功');
      getFoodData();
    });
  });
};

// 处理表格复选框选中变化
const handleSelectionChange = (val: any[]) => {
  selectedRows.value = val;
};

// 提交表单
const submitForm = () => {
  formRef.value.validate((valid: boolean) => {
    if (valid) {
      if (form.id) {
        updateFood(form).then(() => {
          ElMessage.success('修改成功');
          dialogFormVisible.value = false;
          getFoodData();
        });
      } else {
        addFood(form).then(() => {
          ElMessage.success('新增成功');
          dialogFormVisible.value = false;
          getFoodData();
        });
      }
    }
  });
};

// 重置表单
const resetForm = () => {
  Object.assign(form, {
    id: null,
    food_name: '',
    food_type: '',
    price: 0,
    is_halal: 0,
    food_img: '',
  });
};

getFoodData();
</script>

<style scoped>
.food-calendar .el-row {
  margin-bottom: 20px;
}
</style>